window.VueComponents.BannerCom = {
  // 轮播图组件
  data: () => ({
    select: 1, //轮播图选中项
    bannerData: [], //轮播图数据
    timer: null, // 定时器id
  }),
  methods: {},
  created() {
    // 添加组件的样式
    addCssByLink("./component/Banner.css");
    this.initData();
  },
  template: `  <div class="banner-container">
  <!-- 展示图片 -->
 
    <div class="banner-wrapper">
      <img v-for="item in bannerData" :class="{active : select == item.id}" :key="item.id" :src="item.img" class="banner-image" />
    </div>
 
  <!-- 右侧列表 -->
  <div class="banner-inner">
    <div class="banner-list" @mouseleave="handList">
      <ul class="side-list">
      <!--  selected -->
        <li class="side-item" @mouseenter="handItem(item,$event)" :class="{selected : select == item.id}" v-for="item in bannerData" :key="item.id">
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
        </li>
      </ul>
    </div>
  </div>
  
</div>`,
  methods: {
    // 初始化
    initData() {
      const data = BannerData();
      this.bannerData = data;
      this.carousel();
    },
    // 经过某一项
    handItem(item, e) {
      this.select = item.id;
      clearInterval(this.timer);
    },
    //鼠标离开 打开定时
    handList() {
      this.carousel();
    },
    // 定时器轮播
    carousel() {
      this.timer = setInterval(() => {
        console.log("toggle");
        this.select =
          this.select > this.bannerData.length - 1 ? 1 : this.select + 1;
      }, 5000);
    },
  },
};
